@import "@/styles/theme.scss";
.deal-content{
  .details-swiper{
    position: relative;
    swiper{
      width: 100%;
      height: 480px;
    }
    image{
      width: 100%;
      height: 100%;
    }
    .order-num{
      position: absolute;
      z-index: 3;
      bottom: 24px;
      font-size: 26px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 37px;
      background: #5B5B5B;
      border-radius: 23px;
      padding: 0 22px;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }
  .number{
    font-size: 22px;
    font-weight: 300;
    color: #888888;
    line-height: 30px;
    padding: 32px 0 0 48px;
    position: relative;
    &::before{
      content: '';
      position: absolute;
      left: 0;
      background: url('') no-repeat;
      background-size: 40px 30px;
      width: 40px;
      height: 30px;
    }
  }
  .row{
    margin: 0 32px;
  }
  .title{
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    line-height: 56px;
    padding-top: 8px;
  }
  .jg-cg-gq{
    font-size: 0;
    font-weight: 500;
    color: $primary-color;
    line-height: 48px;
    letter-spacing: 1px;
    padding: 16px 0 44px 0;
    display: flex;
    text-align: center;
    text{
      font-size: 34px;
      display: inline-block;
      width: 33.3%;
    }
  }
}

.info-card{
  background-color: #F6F6FA;
  padding-top: 16px;
  .bg{
    background-color: #ffffff;
    padding: 32px;
  }
  .info-box{
    font-size: 28px;
    line-height: 56px;
    font-weight: 500;
    padding: 22px 0 0 0;
    .mc{
      display: inline-block;
      width: 200px;
      color: #A6A9AC;
      text-align: right;
      vertical-align: top;
    }
    .nr{
      display: inline-block;
      width: 478px;
      color: #444444;
    }
    .des{
      line-height: 52px;
      letter-spacing: 1px;
      color: #444444;
    }
  }
  .get-more{
    text-align: center;
    color: $primary-color;
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    padding-top: 24px;
    &.false{
      display: none;
    }
    .at-icon{
      color: #979797;
      margin-left: 8px;
    }
  }
}
.brand-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 42px 32px ;
  .brand-line{
    position: fixed;
    z-index: 10;
    width: 100%;
    top: 0;
    left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .name-type{
    .brand-name{
      font-size: 36px;
      font-weight: 500;
      color: #333333;
      line-height: 44px;
      display: block;
    }
    .brand-type{
      font-size: 24px;
      font-weight: 500;
      color: #A6A9AC;
      line-height: 33px;
      margin-top: 12px;
      display: block;
    }
  }
  .brand-logo{
    width: 132px;
    height: 99px;
    border: 1px solid #CDCDCD;
  }
}
.detail-fixed{
  background: #FFFFFF;
  box-shadow: 0px -1px 17px 0px rgba(231, 231, 231, 0.5);  
  position: fixed;
  z-index: 10;
  bottom: 0;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .detail-in{
    display: flex;
    align-items: center;
    font-size: 0;
    box-sizing: inherit;
    padding: 16px 32px 16px 0;
  }
  .detail-share{
    display: inline-flex;
    flex-direction: column;
    background-color: #ffffff;
    height: 100%;
    justify-content: center;
    padding-left: 55px;
    image{
      width: 50px;
      height: 50px;
    }
    text{
      font-size: 24px;
      font-weight: 500;
      color: #888888;
      line-height: 33px;
    }
  }
  .get-detail, .info-project{
    font-size: 30px;
    font-weight: 500;
    color: #EDEDED;
    line-height: 88px;
    display: inline-block;
    height: 88px;
    width: 290px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .get-detail{
    background: linear-gradient(122deg, #444E63 0%, #16242B 100%);
    border-radius: 100px 0px 0px 100px;
  }
  .info-project{
    background: linear-gradient(295deg, #E4A149 0%, #F6D07C 100%);
    border-radius: 0px 97px 97px 0px;
    color: #FFFFFF;
  }
  .info-project.brand.active{
    background: linear-gradient(295deg, #E4A149 0%, #F6D07C 100%);
  }
  .info-project.brand{
    background: linear-gradient(135deg, #EFEFEF 0%, #CCCCCC 100%);
    width: 560px;
    border-radius: 44px;
  }
}
.year-list{
  padding: 22px 0 0 43px;
  .year-box{
    position: relative;
    width: 644px;
    height: 184px;
    box-sizing: border-box;
    padding: 17px 0 0 67px;
    &:first-child{
        .round-box{
          &::before{
            border-left-width: 0;
          }
        }
    }
    &:last-child{
      .round-box{
          &::after{
            border-left-width: 0;
          }
        }
    }
    image.bg-img{
      position: absolute;
      width: 644px;
      height: 184px;
      top: 0;
      left: 0;
    }
    & > view{
      position: relative;
      z-index: 2;
      font-weight: 500;
      line-height: 56px;
    }
    .year{
      font-size: 28px;
      color: #A6A9AC;
      margin-bottom: 3px;
    }
    .sr-lr{
      font-size: 30px;
      color: #444444;
    }
    .round-box{
      position: absolute;
      left: -43px;
      top: 64px;
      line-height: normal;
      font-size: 0;
      &::before{
        content: '';
        position: absolute;
        height: 74px;
        border-left: 2px dashed rgba($color: #FFA409, $alpha: 0.48);
        top: -64px;
        left: 50%;
        transform: translate(-50%, 0);
      }
      &::after{
        content: '';
        position: absolute;
        height: 96px;
        border-left: 2px dashed rgba($color: #FFA409, $alpha: 0.48);
        top: 24px;
        left: 50%;
        transform: translate(-50%, 0);
      }
      image{
        width: 34px;
        height: 34px;
      }
    }
  }
}
.at-modal__footer .at-modal__action > button.my-btn:last-child{
  color: #1677FF;
}
.modal-success{
  .at-modal__content{
    padding: 60px 24px 40px 24px;
  }
  .modal-sq{
    text-align: center;
    .success-icon{
      width: 120px;
      height: 120px;
    }
    view{
      font-size: 36px;
      font-weight: 500;
      color: #333333;
      line-height: 50px;
      padding: 44px 0 16px 0;
    }
    text{
      font-size: 30px;
      font-weight: 400;
      color: #666666;
      line-height: 42px;
    }
  }
}
.billplay-box{
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  &.false{
  left: -1000%;
    // display: none;
    
  }
  .bg{
    background-color: rgba($color: #000000, $alpha: 0.55);
    height: 100%;
  }
}
.share-action, .sheet-info-box {
  .at-action-sheet__footer{
    border-top-width: 0;
    background-color: #FBFBFD;
    color: #585858;
    font-size: 32px;
  }
}
.share-box{
  display: flex;
  padding: 40px 160px;
  justify-content: space-between;
  .icon-list{
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    image{
      width: 120px;
      height: 120px;
    }
    view{
      padding-top: 12px;
      font-size: 24px;
      font-weight: 400;
      color: #444444;
      line-height: 33px;
    }
  }
}
.sheet-info-box{
  .title{
    font-size: 30px;
    font-weight: 500;
    color: #555555;
    line-height: 90px;
    position: relative;
    border-bottom: 1px solid#E5E5E5;
    .at-my{
      padding: 5px;
      position: absolute;
      top: 24px;
      right: 26px;
      color: #979797;
      font-size: 32px;
    }
  }
  .tz-gw{
    display: flex;
    padding: 40px 0 49px 111px;
    & > image{
      width: 88px;
      height: 88px;
      border-radius: 44px;
    }
    .name-wechat{
      padding-left: 16px;
      view{
        text-align: left;
        font-weight: 500;
        &:first-child{
          font-size: 34px;
          color: #333333;
          line-height: 48px;
          text{
            font-size: 22px;
          }
        }
        &:last-child{
          font-size: 22px;
          color: #A6A9AC;
          line-height: 30px;
        }
      }
    }
  }
  .info-icon-box{
    display: flex;
    padding: 0 89px 76px 89px;
    justify-content: space-between;
    .icon-list{
      padding: 0;
      margin: 0;
      background-color: #ffffff;
      image{
        width: 120px;
        height: 120px;
      }
      view{
        padding-top: 12px;
        font-size: 24px;
        font-weight: 400;
        color: #444444;
        line-height: 33px;
        &:last-child{
          padding-top: 0;
        }
      }
    }
  }
}
.bill-canvas {
  padding-top: 30px;
  .box-c{
    display: inline-block;
    border-radius: 16px;
    // border: 1px solid rgb(235, 235, 235);
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .is-canvas{
    border-radius: 16px;
    // overflow: hidden;
  }
  .down-cancel{
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 12px;
    width: 710px;
    background-color: #ffffff;
    border-radius: 16px;
    .dowm-bill{
      font-size: 28px;
      font-weight: 400;
      color: #666666;
      line-height: 40px;
      padding: 30px 0 34px 0;
      image{
        width: 108px;
        height: 108px;
      }
    }
    .cencel{
      border-top: 1px solid#E5E5E5;
      font-size: 32px;
      font-weight: 400;
      color: #333333;
      line-height: 88px;
    }
  }
}
.modal-con{
  text-align: center;
  padding: 30px 0;
  color: #333333;
}